<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/小米.css">
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="nav_bar clearfix:after">
                <div class="left">
                    <a href="#">小米官网</a>
                    <span>|</span>
                    <a href="#">小米商城</a>
                    <span>|</span>
                    <a href="#">小米澎湃OS</a>
                    <span>|</span>
                    <a href="#">小米汽车</a>
                    <span>|</span>
                    <a href="#">云服务</a>
                    <span>|</span>
                    <a href="#">loT</a>
                    <span>|</span>
                    <a href="#">有品</a>
                    <span>|</span>
                    <a href="#">小爱开放平台</a>
                    <span>|</span>
                    <a href="#">资质证照</a>
                    <span>|</span>
                    <a href="#">协议规则</a>
                    <span>|</span>
                    <a href="#">下载app</a>
                    <span>|</span>
                    <a href="#">Select Location</a>
                </div>
                <div class="right">
                    <a href="#">登录</a>
                    <span>|</span>
                    <a href="#">注册</a>
                    <span>|</span>
                    <a href="#" class="message">消息通知</a>
                    <a href="#" class="car">
                        <i class="iconfont icon-gouwuche"></i>
                        购物车(0)
                        <div class="carlist">购物车中还没有商品，快去选购吧！</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="site_header">
        <div class="container">
            <div class="header_logo">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="nav_list">
                <span><a href="#">Xiaomi手机</a></span>
                <span><a href="#">Redmi手机</a></span>
                <span><a href="#">电视</a></span>
                <span><a href="#">笔记本</a></span>
                <span><a href="#">平板</a></span>
                <span><a href="#">家电</a></span>
                <span><a href="#">路由器</a></span>
                <span><a href="#">服务中心</a></span>
                <span><a href="#">社区</a></span>
                <div class="seach">
                    <input type="text" class="input_seach1">
                    <button>
                        <i class="iconfont icon-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="banner">
            <div class="container">
                <div class="left">
                    <ul>
                        <li>
                            <a href="#" class="a1">
                                <span>手机</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level1_1.webp" alt="">
                                            <span class="text">Xiaomi&nbsp;MIX系列</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level1_2.webp" alt="">
                                            <span class="text">Xiaomi&nbsp;数字旗舰</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level1_3.webp" alt="">
                                            <span class="text">Xiaomi&nbsp;Civi系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>电视</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level2_1.webp" alt="">
                                            <span class="text">小米电视SProMini</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level2_2.webp" alt="">
                                            <span class="text">小米电视SMini系列</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level2_3.webp" alt="">
                                            <span class="text">小米电视S系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>家电</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level3_1.png" alt="">
                                            <span class="text">挂壁空调</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level3_2.webp" alt="">
                                            <span class="text">立式空调</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>笔记本&nbsp;平板&nbsp;显示器</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level4_1.webp" alt="">
                                            <span class="text">Redmi&nbsp;A27U显示器</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>出行&nbsp;穿戴</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="./images/level5_1.webp" alt="">
                                            <span class="text">Xiaomi Watch S4</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>耳机&nbsp;音响</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                我是二级导航F
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>健康&nbsp;儿童</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                我是二级导航G
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>生活&nbsp;箱包</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                我是二级导航H
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>智能&nbsp;路由器</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <div class="level2">
                                我是二级导航I
                            </div>
                        </li>
                        <li>
                            <a href="#" class="a1">
                                <span>电源&nbsp;配件</span>
                                <span><img src="./images/箭头 2.png" alt=""></span>
                            </a>
                            <!-- level2 -->
                            <div class="level2">
                                我是二级导航J
                            </div>
                        </li>
                    </ul>


                </div>
                <div class="right">
                    <img src="./images/banner2.webp" alt="">
                </div>
            </div>
        </div>



        <div class="part_3">
            <div class="container">
                <div class="left">
                    <ul>
                        <li>
                            <img src="./images/保障服务.png" alt="">
                            <span>保障服务</span>
                        </li>
                        <li>
                            <img src="./images/企业.png" alt="">
                            <span>企业团购</span>
                        </li>
                        <li>
                            <img src="./images/F码.png" alt="">
                            <span>F码通道</span>
                        </li>
                        <li>
                            <img src="./images/卡.png" alt="">
                            <span>米粉卡</span>
                        </li>
                        <li>
                            <img src="./images/换新.png" alt="">
                            <span>以旧换新</span>
                        </li>
                        <li>
                            <img src="./images/话费.png" alt="">
                            <span>话费充值</span>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <div class="box">
                        <img src="./images/手机.png" alt="">
                    </div>
                    <div class="box">
                        <img src="./images/电视.jpg" alt="">
                    </div>
                    <div class="box">
                        <img src="./images/耳机.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="market">
            <div class="part1">
                <img src="./images/手机_big.webp" alt="">
            </div>
            <div class="part2">
                <div class="title">
                    <span>手机</span>
                    <a href="#">查看更多</a>
                </div>
                <div class="content clearfix:after">
                    <div class="left">
                        <img src="./images/iphone_1.webp" alt="">
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="./images/ihone_2.webp" alt="">
                                <p class="t1">Xiaomi15</p>
                                <p class="t2"> 徕卡光学 Summilux 高速镜头｜骁龙®8...</p>
                                <p class="t3">4499元起</p>
                            </li>
                            <li>
                                <img src="./images/iphone_3.webp" alt="">
                                <p class="t1">Xiaomi15Pro</p>
                                <p class="t2"> 徕卡光学 Summilux 高速镜头｜骁龙...</p>
                                <p class="t3">5299元起</p>
                            </li>
                            <li>
                                <img src="./images/iphone_4.webp" alt="">
                                <p class="t1">Xiaomi15定制版</p>
                                <p class="t2"> 徕卡光学 Summilux 高速镜头｜骁龙®8...</p>
                                <p class="t3">4499元起</p>
                            </li>
                            <li>
                                <img src="./images/iphone_5.webp" alt="">
                                <p class="t1">Redmi Note 14 Pro+</p>
                                <p class="t2"> 第三代骁龙7s</p>
                                <p class="t3">1899元起</p>
                            </li>
                            <li>
                                <img src="./images/iphone_6.webp" alt="">
                                <p class="t1">Redmi Note 14 Pro</p>
                                <p class="t2"> 天玑7300-Ultra</p>
                                <p class="t3">1399元起</p>
                            </li>
                            <li>
                                <img src="./images/ipone_7.webp" alt="">
                                <p class="t1">Redmi K70 至尊版</p>
                                <p class="t2"> 性能魔王 全面进化</p>
                                <p class="t3">2499元起</p>
                            </li>
                            <li>
                                <img src="./images/ipone_8.webp" alt="">
                                <p class="t1">Xiaomi MIX Flip</p>
                                <p class="t2"> 4.01英寸多功能超大外屏|徕卡光学Su</p>
                                <p class="t3">5999元起</p>
                            </li>
                            <li>
                                <img src="./images/ipone_9.webp" alt="">
                                <p class="t1">Xiaomi MIX Fold 4</p>
                                <p class="t2"> 超轻薄四曲面机身|小米龙骨转轴2.0</p>
                                <p class="t3">8999元起</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="part3">
                <div class="part3_title">
                    <span>家电</span>
                    <a href="#">热门</a>
                    <a href="#">电视影音</a>
                    <a href="#">空调</a>
                </div>
                <div class="part3_content">
                    <ul>
                        <li>
                            <img src="./images/家电1.webp" alt="" class="img1">
                        </li>
                        <li>
                            <img src="./images/家电2.webp" alt="">
                            <p class="t1">小米电视S系列</p>
                            <p class="t2"> 144HZ超高刷&nbsp;3+32G&nbsp;多色温色彩还原...</p>
                            <p class="t3">2599元起</p>
                        </li>
                        <li>
                            <img src="./images/家电3.webp" alt="">
                            <p class="t1">小米电视SProMini LED系列</p>
                            <p class="t2"> 144HZ超高刷、4+64G大存储</p>
                            <p class="t3">4999元起</p>
                        </li>
                        <li>
                            <img src="./images/家电4.webp" alt="">
                            <p class="t1">小米电视S Mini LED系列</p>
                            <p class="t2"> Mini LED 高分区背光、1200nits峰值...</p>
                            <p class="t3">2999元起</p>
                        </li>
                        <li>
                            <img src="./images/家电5.webp" alt="">
                            <p class="t1">巨省电&nbsp;小米空调&nbsp;1.5匹新1级能效</p>
                            <p class="t2"> 强劲制冷|高效节能|智能互联</p>
                            <p class="t3">2499元起</p>
                        </li>
                        <li>
                            <img src="./images/家电6.webp" alt="" class="img1">
                        </li>
                        <li>
                            <img src="./images/家电7.webp" alt="">
                            <p class="t1">米家新风空调&nbsp;立式3匹</p>
                            <p class="t2"> 全屋快通风，就要大新风</p>
                            <p class="t3">5999元起</p>
                        </li>
                        <li>
                            <img src="./images/家电8.webp" alt="">
                            <p class="t1">米家波轮洗衣机&nbsp;10Kg</p>
                            <p class="t2"> 全景玻璃阻尼上盖&nbsp;防夹手</p>
                            <p class="t3">999元起</p>
                        </li>
                        <li>
                            <img src="./images/家电9.webp" alt="">
                            <p class="t1">米家迷你波轮洗衣机Pro&nbsp;3kg</p>
                            <p class="t2"> 高温煮洗&nbsp;杀菌除螨</p>
                            <p class="t3">849元起</p>
                        </li>
                        <li>
                            <div>
                                <img src="./images/家电10.webp" alt="">
                                <div>
                                    <p class="t2">米家冰箱无霜</p>
                                    <p class="t2">两门186L</p>
                                    <p class="t3">1199元</p>
                                </div>
                            </div>
                            <div class="div2">
                                <i class="iconfont icon-youjiantou"></i>
                                <p class="t1">浏览更多</p>
                                <p class="t2">热门</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tool">
            <a href="#">
                <div class="icon">
                    <img src="./images/iPhone.png" alt="">
                </div>
                <span class="text">手机APP</span>
            </a>
            <a href="#">
                <div class="icon">
                    <img src="./images/个人中心.png" alt="">
                </div>
                <span class="text">个人中心</span>
            </a>
            <a href="#">
                <div class="icon">
                    <img src="./images/维修服务.png" alt="">
                </div>
                <span class="text">维修服务</span>
            </a>
            <a href="#">
                <div class="icon">
                    <img src="./images/人工客服.png" alt="">
                </div>
                <span class="text">人工客服</span>
            </a>
            <a href="#">
                <div class="icon">
                    <img src="./images/购物车.png" alt="">
                </div>
                <span class="text">购物车</span>
            </a>
            <a href="小米.html">
                <div class="icon">
                    <img src="./images/上箭头2.png" alt="">
                </div>
                <span class="text">回到顶部</span>
            </a>
        </div>
</body>

</html>